<template>
	<view  class="container adduser">
		<myhead :title="mytitle"></myhead>
		<view class="main">
			<view class="info">
				<view class="item name">
					<view class="iteminfo">
						<text>客户姓名</text>
						<text style="color: #DD524D;">(必填)</text>
					</view>
					<view class="myinput">
						<input 
						focus=true
						@focus = "focuschange(1)"
						:class="{active:inputindex == 1}"
						class="inputbox" placeholder="请输入客户姓名"/>
					</view>
				</view>
				<view class="item tel">
					<view class="iteminfo">
						<text>客户电话</text>
					</view>
					<view class="myinput">
						<input 
						@focus = "focuschange(2)"
						:class="{active:inputindex == 2}"
						class="inputbox"
						placeholder="请输入客户电话"
						type = "number"/>
					</view>
				</view>
				<view class="item car">
					<view class="iteminfo">
						<text>车牌号码</text>
					</view>
					<view class="myinput">
						<input 
						@focus = "focuschange(3)"
						:class="{active:inputindex == 3}"
						class="inputbox" placeholder="请输入车牌号码" type = "number"/>
					</view>
				</view>
			</view>
			<view class="btn">
				提交
			</view>
		</view>
	</view>
</template>

<script>
	import myhead from "../../components/header/header.vue"
	export default {
		data() {
			return {
				mytitle:'添加客户',
				inputindex:0
			};
		},
		methods:{
			focuschange(e){
				this.inputindex = e
			}
		},
		components:{
			myhead
		}
	}
</script>

<style lang="scss">
.adduser{
	color: black;
	display: flex;
	flex-direction: column;
	.main{
		width: 100%;
		box-sizing: border-box;
		flex: 1;
		background-color: #EEEEEE;
		padding: 10rpx;
		.info{
			margin-bottom: 30rpx;
			background-color: #FFFFFF;
			padding: 12rpx;
			.item{
				.iteminfo{
					padding: 10rpx;
					font-size: 30rpx;
				}
				.myinput{
					padding: 10rpx;
					.inputbox{
						background-color: #E8E8E8;
						padding: 15rpx 20rpx;
						border-radius: 18rpx;
						font-size: 30rpx;
						border: 2rpx solid #E8E8E8;
						&.active{
							border-color: #34C758;
						}
					}
				}
			}
		}
		.btn{
			width: 50%;
			margin: 0 auto;
			background-color: #353766;
			text-align: center;
			line-height: 70rpx;
			font-size: 30rpx;
			white-space: nowrap;
			color: #FFFFFF;
			border-radius: 28rpx;
		}
	}
}
</style>
